<template>
  <div id="search-page" class="background full-background">
    <div class="contain">
      <!--账号-->
      <div class="head-box">
        <main-guide-bar :search-visible="false" :guide-visible="false"/>
      </div>
      <!--导航条-->
      <div class="guide-bar">
        <div class="title-box">
          <div
              class="title-item"
              :class="item.class"
              v-for="(item, index) in guideList"
              :key="index"
              @click="onChangeGuideItem(item, index)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>

      <div id="content-nav">
        <div class="content-view-box">
          <div class="guide-position-box">
            <div class="guide-position-item">

              <a-breadcrumb separator=">">
                我的位置：
                <a-breadcrumb-item>
                  <router-link
                      :to="{name:'home'}"
                  >首页</router-link>
                </a-breadcrumb-item>

                <a-breadcrumb-item href="#">
                  搜索结果
                </a-breadcrumb-item >
              </a-breadcrumb>
            </div>
          </div>
        </div>
        <div class="content-guide-item position-search-box">
          <!--搜索框-->
          <div class="search-box">
            <div class="search-item">
              <a-input class="input-item" placeholder="请输入文献标题关键字" v-model="keyword"/>
              <a-button class="button-item" @click="onSearch"><a-icon type="search" /></a-button>
            </div>
          </div>
          <div class="keyword-content">
            <div class="keyword-box">
              <div>搜索词：<span>{{keyword}}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <a-row>
          <a-col :lg="4" :md="24">
              <div class="type-list-box">
                <div class="title">类别</div>
                <div class="type-list">
                  <div class="type-list-item">地方史志({{localHistoryArr.length}})</div>
                  <div class="type-list-item">本地报纸({{newsPaperArr.length}})</div>
                  <div class="type-list-item">视频讲座({{videoLectureArr.length}})</div>
                  <div class="type-list-item">精品图书({{excellentBooksArr.length}})</div>
                  <div class="type-list-item">电子期刊({{digitalJournalArr.length}})</div>

                </div>
              </div>
          </a-col>
          <a-col :lg="20" :md="24">
            <div class="content-box">
              <div class="content-list-box">
                <book-simple-component
                    class="book-item"
                    v-for="(item, index) in pageData.records"
                    :key="index"
                    :book-data="item"
                    code="local-history"
                    path="LocalHistory"
                />
              </div>

              <div class="pagination-box">
                <!--分页器-->
                <pagination-component
                    class="pagination"
                    :loading="loadPageDataSetting.loading"
                    :page-data="pageData"
                    :page-size="loadPageDataSetting.pageSize"
                />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>

</template>

<script>
import {getTopicChild, search} from "@/api/CommonApi";
// import GuidePosition from "@/components/FunctionComponent/GuidePosition";
import MainGuideBar from "../components/MainGuideBar";
import TopicViewPageDataMixin from "@/mixins/TopicViewPageDataMixin";
import PaginationComponent from "@/components/ToolComponent/PaginationComponent";
import BookSimpleComponent from "../components/SourseDataComponent/Book/BookSimpleComponent";



//栏目code
const PATHLIST = [
  "/ResourceGuides",  //首页
  "/ResourceGuides/LocalHistory",  //地方志
  "/ResourceGuides/LocalNewspaper", //本地报纸
  "/ResourceGuides/VideoLecture",  //视频讲座
  "/ResourceGuides/ExcellentBooks",  //精品图书
  "/ResourceGuides/DigitalJournal", //电子期刊
  "/DigitalResources",  //数字资源
  "/ServiceGuide",  //服务指南
  "/AboutUs"   //关于我们
];
const INDEX_ITEM = {
  title: '首页',
  path: '/'
};
export default {
  name: "SearchPage",
  data() {
    return {
      data: {},
      keyword: '',

      // 导航栏列表
      guides: [],
      pageData:{
        current:1,
        records:[],
        total:0,
      },
      //栏目code
      pathList: PATHLIST,
      // curItem:{}

      // 当前页地方志列表
      localHistoryArr:[],
      // 当前页地方报纸列表
      newsPaperArr:[],

      // 当前页视频讲座
      videoLectureArr:[],

      // 当前页精品图书列表
      excellentBooksArr:[],

      // 当前页电子期刊列表
      digitalJournalArr:[],

      page:1,
    }
  },
  mixins:[
    //记载分页数据
    TopicViewPageDataMixin,
  ],
  computed: {
    curItem(){
      const path = this.$route.path
      const list = [...this.guides]
      for (let i = 0; i < list.length; i++) {
        list[i].class = {}
        list[i].path = this.pathList[i]
        // 判断当前所在的栏目
        if (list[i].path === path) {
          return   list[i]
        }
      }
      return {}
    },
    // 计算属性,导航栏列表
    guideList() {
      const path = this.$route.path
      const list = [...this.guides]
      for (let i = 0; i < list.length; i++) {
        list[i].class = {}
        list[i].path = this.pathList[i]
        // 判断当前所在的栏目
        if (list[i].path === path) {
          const itemCode = list[i].code
          list[i].class = {
            active: true,
          }
          list[i].class[itemCode] = itemCode
        }

      }
      return list
    }
  },
  components: {
    MainGuideBar,
    PaginationComponent,
    BookSimpleComponent
  },
  mounted() {
    this.keyword = this.$route.params.keyword
    this.page = this.$route.params.page
    this.loadingData();
    //加载栏目数据
    this.loadMainGuiderData("cd")
  },
  methods:{
    // 加载页面数据
    loadingData() {
      search({keyword: this.keyword, page: this.page}).then(res => {
        console.log(res)
        let arr = res.result.resource.records
        this.localHistoryArr = arr.filter(item=>item.topicPath[1].code === "local-history")
        this.newsPaperArr = arr.filter(item=>item.topicPath[1].code === "local-newspaper")
        this.videoLectureArr = arr.filter(item=>item.topicPath[1].code === "video-lecture")
        this.excellentBooksArr = arr.filter(item=>item.topicPath[1].code === "excellent-books")
        this.digitalJournalArr = arr.filter(item=>item.topicPath[1].code === "digital-journal")
        res.result.resource.records = this.localHistoryArr
        this.pageData =  res.result.resource
        this.pageData.current = this.page
      })
    },
    // 加载导航栏数据
    loadMainGuiderData(topicCode) {
      console.log('loadMainGuiderData')
      getTopicChild(topicCode).then(res => {
        console.log(res)
        const result = res.result || []
        console.log("res = ", res)
        // 填充首页
        result.unshift(INDEX_ITEM)
        this.guides = result
        console.log(" this.guides = ", this.guides);

      }).catch(err => {
        console.log(err)
      })
    },
    onSearch(){

    },
    onChangeGuideItem(item, index) {
      console.log(item)
      if (item.path && item.path !== this.$route.path)
        if (item.path === '/ResourceGuides') {
          // console.log(item)
          this.$router.push({name: 'home', path: '/'})
        } else {
          this.$router.push({path: this.pathList[index], query: {code: item.code}})
          // this.curItem = item
        }
      console.log("this.guideList = ", this.guideList)
    }
  }
}
</script>

<style lang="less" scoped>
@import "../assets/global.less";
//phone
@media only screen and (max-width: 576px) {
  @width:100vw;
  @height:50vh;

  #content-nav {
    width: @width;
    height: @height;
    @max-width: 100vw;
    //账号
    .head-box {
      @head-height: 310px;
      width: @max-width;
      height: @head-height;
      background-image: url("../assets/PC-BackgroundImage/banner.png");
      background-size: @max-width @head-height;
      background-repeat: no-repeat;
      background-position-x: center;
    }

    .content-guide-item {
      width: @width;
      height: @height;
      line-height:@height;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .position-search-box {
      padding: 0 2vw;
      height:@height;
      line-height:@height;

      .guide-position-item {
        height:@height;
        line-height:@height;
      }

      .search-item {
        display:none;
      }
    }
  }
}


//pc
@media only screen and(min-width: 576px) {
  @max-width:100vw;
  @min-width:900px;
  @min-height:750px;
  @width:100vw;
  @height:50vh;
  @content-width:900px;

  #search-page {
    background-image: url("../assets/PC-BackgroundImage/HomeBackground.png");

    //账号
    .head-box {
      @head-height: 310px;
      width: @max-width;
      height: @head-height;
      background-image: url("../assets/PC-BackgroundImage/banner.png");
      background-size: @max-width @head-height;
      background-repeat: no-repeat;
      background-position-x: center;
    }

    .content-view-box {
      .guide-position-box{
        width: 100vw;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background-color: white;
        .guide-position-item {
          width: 1200px;
        }
      }
    }
    .type-list-box{
      padding-top: 67px;
      .title{
        font-size: 24px;
        font-weight: bold;
      }
      .type-list {
        padding-top: 40px;
        .type-list-item {
          padding: 15px 0;
          font-size: 18px;
        }
      }
    }

    //内容
    .content-box{
      width: @min-width;
      min-height:@min-height;  //650px
      padding:30px 0;
      display: flex;
      flex-direction: column;
      //内容列表
      .content-list-box{
        min-height: calc(@min-height - 60px - 50px);  //650px - 110px = 540px;
        display:flex;
        flex-wrap:wrap;
        justify-content: flex-start;
        align-content: flex-start;
        .book-item{
          margin:19px;
        }

      }
      //分页器
      .pagination-box{
        display:flex;
        justify-content: center;
        align-items: center;
      }

    }

    .guide-bar {
      width: @max-width;
      min-height: 40px;
      background-color: rgba(15, 121, 205, 1);
      display: flex;
      .title-box {
        width: calc(@max-width - 400px);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin: auto;
        .title-item {
          border: none;
          background-color: rgba(15, 121, 205, 1);
          color: white;
          width: 90px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
          padding: 0 5px;
          cursor: pointer;
          .line-ellipsis(1);

          &:hover {
            background-color: rgba(126, 206, 244, 1);
          }

          &.active {
            background-color: rgba(126, 206, 244, 1)
          }

        }
      }
    }
    #content-nav {
      .position-search-box {
        //border-top: 1.5px solid blue;
        //padding: 0 150px;

        .guide-position-item {
          //border: 1px solid red;
          //width: 300px;
          height: 30px;
        }

        .search-item {

        }
      }

      //搜索框
      .search-box{
        width:@max-width;
        height:70px;
        background-color:white;
        display:flex;
        justify-content: center;
        align-items: center;
        .search-item{
          border:1px solid RGBA(15, 121, 205, 1);
          width:470px;
          height:32px;
          display:flex;
          justify-content: flex-start;
          align-items: center;
          border-radius: 16px;
          overflow: hidden;
          background:linear-gradient(to right, white 78.5%, RGBA(15, 121, 205, 1) 78.5%);
          background-clip: border-box;

          .input-item{
            width:370px;
            height:32px;
            border:none;
            border-radius: 16px 0 0 16px;
          }
          .button-item{
            width:100px;
            height:35px;
            border-radius: 0 16px 16px 0;
            border:none;
            background-color:RGBA(15, 121, 205, 1);
            color:white;
            font-size:18px;
          }
        }
      }

      // 搜索内容
      .keyword-content{
        width: 100vw;
        background-color: white;
        display: flex;
        justify-content: center;
        padding-top: 60px;
        padding-bottom: 38px;
        .keyword-box{
          background: white;
          width: 900px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: flex-start;
        }
      }


    }
  }
}


</style>
